<template>
    <a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        theme="dark"
    >
        <template v-for="item in menu" :key="item.key">
            <template v-if="!item.children">
                <a-menu-item :key="item.key">
                    <template #icon>
                        <PieChartOutlined />
                    </template>
                    <router-link :to="{ path: item.link }">{{ item.title }}</router-link>
                </a-menu-item>
            </template>
            <template v-else>
                <!-- 递归子菜单 -->
                <sub-menu :key="item.key" :menu-info="item" />
            </template>
        </template>
    </a-menu>
</template>

<script lang="ts" setup>
import { PieChartOutlined } from '@ant-design/icons-vue';
import { ref, reactive, toRefs, watch } from 'vue';
import { useStore } from 'vuex'
import subMenu from '@/package/abc/menu/subMenu.vue';
import { post, get } from '@/services/api/request';
import { useRoute, useRouter } from 'vue-router'


const path = ref(useRoute().path)
const initdata = reactive({ menu: [] as Array<any>, openKeys: [] as Array<any> })
const { menu, openKeys } = toRefs(initdata)

const store = useStore()

const props = defineProps({
    propsMenu: {
        type: Array,
        default: []
    },
})

const selectedKeys = ref<string[]>([])
//初始化函数
const init = () => {
    //设置菜单
    setMenu()
}

// 初始化菜单
const setMenu = () => {
    if (Object.keys(props.propsMenu).length > 0) {
        menu.value = props.propsMenu
        return
    }
    let setbr = setInterval(() => {
        if (Object.keys(store.state.abc.menu).length > 0) {
            menu.value = store.state.abc.menu
            const result = getopen(menu.value, path.value)
            if (result) {
                openKeys.value = result
            }
            clearInterval(setbr)
        }
    })
}


const getopen = (menu: Array<any>, path: string) => {
    let arrPath: any[] = [] //路径保存
    let flag = false
    // 递归子集
    const children = (v2: any, arrPath: any, path: string) => {
        let flag = false
        v2.forEach((res: any, index: number) => {
            if (res.link == path) {
                //初始化选中菜单
                selectedKeys.value = [res.key]
                arrPath = [...arrPath, res.key]
                flag = true
            } else {
                if (!flag && v2.children && v2.children.length > 0) {
                    arrPath = [...arrPath, res.key]
                    const result = children(v2.children, arrPath, path)
                    if (result) {
                        flag = true
                    }
                }
            }
        })
        if (flag) {
            return arrPath
        }
    }
    menu.forEach((res: any, index: number) => {
        if (res.link == path) {
            //初始化选中菜单
            selectedKeys.value = [res.key]
            arrPath = [res.key]
            flag = true
        } else {
            if (!flag && res.children && res.children.length > 0) {
                arrPath = [res.key]
                let result = children(res.children, arrPath, path)
                if (result) {
                    flag = true
                }

            }
        }
    })

    if (flag) {
        return arrPath
    }

}

//路由导航 侦听
useRouter().afterEach((to, from, failure) => {
    path.value = to.path
    const result = getopen(menu.value, path.value)
    if (result) {
        openKeys.value = result
    }
    //console.log(selectedKeys.value,openKeys.value)
})


init()

defineExpose({ menu })

</script>
<script  lang="ts">
export default {
    name: 'vMenu'
}
</script>
<style>
</style>